<template>
	<com-page :bg-color="skinColor.color_gap_1">
		<com-nav-bar border :title="(isEdit ? '编辑' : '添加') + page.label" :color="skinColor.color_1" :bg-color="skinColor.color_bg_1" :border-color="skinColor.color_gap_1" />
		<scroll-view scroll-y class="y-flex-1">
			<view class="y-flex page-padding-gap pt-20 pb-20 ml-20 mr-20 border-radius-15 mt-20" :style="{'background-color': skinColor.color_bg_1}">
				<text class="fs-24" :style="{'color': skinColor.color_blue}">基础配置</text>
				<form-item
				v-for="(key, i) in Object.keys(pageForm)"
				:key="i"
				v-model="pageForm[key]"
				:type="pageData[key].type"
				:label="pageData[key].label"
				:required="pageData[key].required"
				:paddingShow="false"
				:disabled="disabled"></form-item>
			</view>
			<view class="y-flex page-padding-gap pt-20 pb-20 ml-20 mr-20 border-radius-15 mt-20" :style="{'background-color': skinColor.color_bg_1}">
				<text class="fs-24" :style="{'color': skinColor.color_blue}">亮色模式样式</text>
				<form-item
				v-for="(key, i) in Object.keys(lightForm)"
				:key="i"
				v-model="lightForm[key]"
				:type="pageStyle[key].type"
				:label="pageStyle[key].label"
				:disabled="disabled"
				closeable
				:paddingShow="false"
				@close="handleClose('lightForm', key)"></form-item>
				<view class="y-flex y-row y-align-center y-justify-center mt-20" @tap="handleStyleSelect('lightForm')">
					<com-icon name="add" size="35" :color="skinColor.color_1"></com-icon>
					<text class="fs-28" :style="{color: skinColor.color_1}">添加暗黑样式</text>
				</view>
			</view>
			<view class="y-flex page-padding-gap pt-20 pb-20 ml-20 mr-20 border-radius-15 mt-20" :style="{'background-color': skinColor.color_bg_1}">
				<text class="fs-24" :style="{'color': skinColor.color_blue}">暗黑模式样式</text>
				<form-item
				v-for="(key, i) in Object.keys(darkForm)"
				:key="i"
				v-model="darkForm[key]"
				:type="pageStyle[key].type"
				:label="pageStyle[key].label"
				:disabled="disabled"
				closeable
				:paddingShow="false"
				@close="handleClose('darkForm', key)"></form-item>
				<view class="y-flex y-row y-align-center y-justify-center mt-20" @tap="handleStyleSelect('darkForm')">
					<com-icon name="add" size="35" :color="skinColor.color_1"></com-icon>
					<text class="fs-28" :style="{color: skinColor.color_1}">添加暗黑样式</text>
				</view>
			</view>
			<slot></slot>
			<com-gap height="20rpx"></com-gap>
		</scroll-view>
		<view class="y-flex page-padding-gap pt-20 pb-20 border-top-1" :style="{'background-color': skinColor.color_bg_1, 'border-top-color': skinColor.color_gap_1}">
			<com-button size="35" padding="20rpx 30rpx" type="primary" value="保存页面" :disabled="disabled" @click="submit"></com-button>
			<com-safe-bottom></com-safe-bottom>
		</view>
	</com-page>
</template>

<script>
	import FormItem from '../components/FormItem.vue'
	import FormHeader from '../components/Header.vue'
	import { Page } from '@/assets/js/interface.js'
	export default {
		components: { FormItem, FormHeader },
		inject: ['getSkinColor', 'getQuery', 'selectOptions', 'deleteProperty', 'Router', 'deepClone'],
		computed: {
			skinColor () {
				return this.getSkinColor()
			},
			query () {
				return this.getQuery()
			},
			disabled () {
				return this.query.disabled
			},
			type () {
				return this.query.type
			},
			page () {
				return Page[this.type]
			},
			pageData () {
				return this.page.data
			},
			pageDataValue () {
				const obj = {}
				Object.keys(this.pageData).forEach(key => {
					obj[key] = this.pageData[key].value
				})
				return obj
			},
			pageStyle () {
				return this.page.style
			},
			originForm () {
				return this.query.form
			}
		},
		data () {
			return {
				isEdit: false,//是否是编辑
				pageForm: {},
				lightForm: {},
				darkForm: {}
			}
		},
		created() {
			this.pageForm = this.deepClone(this.pageDataValue)
			this.pageForm.type = this.type
			if ( this.originForm ) {
				this.isEdit = true
				Object.keys(this.pageForm).forEach(key => {
					this.pageForm[key] = this.originForm[key] || this.pageForm[key]
				})
				const style = this.originForm.style || {}
				const darkStyle = this.originForm.darkStyle || style.darkStyle || {}
				Object.keys(style).forEach(key => {
					this.lightForm[key] = style[key]
				})
				Object.keys(darkStyle).forEach(key => {
					this.darkForm[key] = darkStyle[key]
				})
			}
		},
		methods: {
			handleStyleSelect (formName) {
				if ( this.disabled ) return
				this.selectOptions({
					title: '选择添加的样式',
					actions: Object.keys(this.pageStyle).filter(key => Object.keys(this[formName]).indexOf(key) == -1).map(key => this.pageStyle[key].label),
					success: res => {
						const keys = Object.keys(this.pageStyle)
						const index = keys.findIndex(key => this.pageStyle[key].label == res.detail.label )
						const key = keys[index]
						this.$set(this[formName], key, this.pageStyle[key].value)
					}
				})
			},
			handleClose (formName, k) {
				this[formName] = this.deleteProperty(this[formName], k)
			},
			submit () {
				const validate = Object.keys(this.pageForm).every(key => {
					if ( (this.pageForm[key] != '' && this.pageForm[key] != undefined && this.pageForm[key] != null) || !this.pageData[key].required ) return true
					else {
						uni.showToast({
							title: this.pageData[key].label + '不能为空',
							icon: 'none'
						})
						return false
					}
				})
				if ( validate ) this.$emit('submit', Object.assign({}, this.pageForm, {style: this.lightForm, darkStyle: this.darkForm}))
			}
		}
	}
</script>

<style>
</style>